<template>
  <div>
    <TitleSecondary
      v-if="titleShow"
      :title="title"
      :icon="icon"
      @change="handleChangeIcon"
    />
    <p-table
      table-layout="auto"
      :row-key="
        (record, index) => {
          return index;
        }
      "
      :columns="columns"
      bordered
      :scroll="{ x: '100%' }"
      :pagination="false"
      :data-source="dataSource"
    >
      <template slot="principal" slot-scope="text, record, index">
        <p-icon type="user" />
        <SelectSearchPeople
          :value="text"
          value-key="handleUser"
          style="width: 20vw"
          @change="handleInputChange($event, text, record, index, 'principal')"
        />
      </template>
      <span slot="opportunityStageName" slot-scope="text, record, index">
        <span v-if="index === 0" class="poros-table-header-required"> </span>
        {{ text }}
      </span>
      <span slot="departmentName" slot-scope="text">
        {{ text || '-' }}
      </span>
    </p-table>
  </div>
</template>

<script>
import { getUserOrganization } from '@/api/public.js';
export default {
  props: {
    title: {
      type: String,
      default: '指定商机阶段负责人',
    },
    titleShow: {
      type: Boolean,
      default: true,
    },
    // dataSource: {
    //   type: Array,
    //   default: () => [],
    // },
    columns: {
      type: Array,
      default: () => [
        {
          align: 'center',
          title: '商机阶段',
          dataIndex: 'opportunityStageName',
          scopedSlots: { customRender: 'opportunityStageName' },
        },
        {
          align: 'center',
          title: '负责人',
          dataIndex: 'principal',
          width: 150,
          scopedSlots: { customRender: 'principal' },
        },
        {
          align: 'center',
          title: '部门',
          dataIndex: 'departmentName',
          width: 200,
          scopedSlots: { customRender: 'departmentName' },
        },
        {
          align: 'center',
          title: '职位',
          dataIndex: 'positionName',
          scopedSlots: { customRender: 'positionName' },
        },
      ],
    },
  },
  data() {
    return {
      dataSource: [
        {
          opportunityStage: '1',
          opportunityStageName: '商机信息确认',
          principal: [],
          createUser: {
            key: '',
            label: '',
          },
          currentUserId: '',
          currentUserName: '',
          departmentName: '',
          departmentCode: '',
          positionCode: '',
          positionName: '',
        },
        {
          opportunityStage: '2',
          opportunityStageName: '商机决策',
          principal: [],
          createUser: {
            key: '',
            label: '',
          },
          currentUserId: '',
          currentUserName: '',
          departmentName: '',
          departmentCode: '',
          positionCode: '',
          positionName: '',
        },
        {
          opportunityStage: '3',
          opportunityStageName: '投标',
          principal: [],
          createUser: {
            key: '',
            label: '',
          },
          currentUserId: '',
          currentUserName: '',
          departmentName: '',
          departmentCode: '',
          positionCode: '',
          positionName: '',
        },
        {
          opportunityStage: '4',
          opportunityStageName: '立项',
          principal: [],
          createUser: {
            key: '',
            label: '',
          },
          currentUserId: '',
          currentUserName: '',
          departmentName: '',
          departmentCode: '',
          positionCode: '',
          positionName: '',
        },
        {
          opportunityStage: '5',
          opportunityStageName: '产品研发及验证',
          principal: [],
          createUser: {
            key: '',
            label: '',
          },
          currentUserId: '',
          currentUserName: '',
          departmentName: '',
          departmentCode: '',
          positionCode: '',
          positionName: '',
        },
        {
          opportunityStage: '6',
          opportunityStageName: '商机认证',
          principal: [],
          createUser: {
            key: '',
            label: '',
          },
          currentUserId: '',
          currentUserName: '',
          departmentName: '',
          departmentCode: '',
          positionCode: '',
          positionName: '',
        },
        {
          opportunityStage: '7',
          opportunityStageName: '赢单',
          principal: [],
          createUser: {
            key: '',
            label: '',
          },
          currentUserId: '',
          currentUserName: '',
          departmentName: '',
          departmentCode: '',
          positionCode: '',
          positionName: '',
        },
      ],
    };
  },
  computed: {},
  watch: {},
  created() {},
  methods: {
    async handleInputChange(e, text, record, index, key) {
      console.log(e, text, record, index, key);
      this.dataSource[index][key] = e;
      this.dataSource[index]['createUser'] = e[0];
      this.dataSource[index]['currentUserId'] = e[0][0];
      this.dataSource[index]['currentUserName'] = e[0][1];
      const result = await getUserOrganization(e[0][0]);
      console.log(result, 'result');
      const orgPosDtos = result?.data?.data?.relDtoList || [];
      const orgPosDtosFirst = orgPosDtos[0] || {};
      this.dataSource[index]['departmentName'] = orgPosDtosFirst.orgName;
      this.dataSource[index]['departmentCode'] = orgPosDtosFirst.orgCode;
      this.dataSource[index]['positionName'] = orgPosDtosFirst.positionName;
      this.dataSource[index]['positionCode'] = orgPosDtosFirst.positionCode;
      console.log(this.dataSource, '---------');
      // const data = result.data.data[0]?.relDtoList || [];
      // console.log(result, 'result');
      // console.log(data, 'data');
    },
  },
};
</script>

<style lang="less" scoped>
.log-container {
  width: 100%;
}
.item-container {
  display: flex;
  align-items: center;
}
.button-container {
  margin-bottom: 20px;
}
.table-container {
  margin-bottom: 40px;
}
/deep/ .poros-select-selection {
  border: none;
}
</style>
